<template>
	<!-- 新增或修改地址页面 -->
	<view class="siteAddOrModify">
		<view class="site-mode">
			<view class="siteAddOrModify-info">
				<view class="title">姓名</view>
				<input class="siteRight" type="text" :value="siteId==-1?'':siteDetail.consignee" placeholder="请输入" />
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">手机号码</view>
				<input class="siteRight" type="text" :value="siteId==-1?'':siteDetail.consignee_phone"
					placeholder="请输入" />
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">上门地址</view>
				<view class="getset" v-if="siteId==-1">
					<view class="getSite-title siteRight">点击获取位置</view>
					<view class="icon iconfont icon-xiangyoujiantou"></view>
				</view>
				<view class="siteinfo siteRight" v-else>{{siteDetail.location}}</view>
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">详细地址</view>
				<input class="siteRight" type="text" :value="siteId==-1?'':siteDetail.detail" placeholder="请输入" />
			</view>
			<view class="sitedefault">
				<view class="title">设为默认</view>
				<switch color="#00b388" :checked="isSwitchOn" @change="handleSwitchChange"></switch>
			</view>
		</view>
		<view class="TapSave">点击保存</view>
		<view class="delete" v-if="siteId!=-1" @tap="onDelete">删除</view>
	</view>
</template>

<script>
	import $http from "@/component/commen/api/request.js"
	export default {
		data() {
			return {
				isSwitchOn: false, //控制开关
				siteId: "", //从哪里点击进来的，用于判断当前是新增还是更改,-1:新增；其他：更改
				siteDetail: {}, //修改之前的地址数据
				detailId: {}, //点击的数据的id
			};
		},
		onLoad(e) {
			this.siteId = e.id
			this.detailId = e.detailId
			console.log("detailId:", this.detailId)
			// console.log(this.siteDetail)
			// console.log(this.siteDetail.is_default)

		},
		mounted() {
			this.getDetail()
		},
		methods: {
			getDetail() { //获取点击进来的数据
				$http({
					url: `?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=address&op=detail&m=wjyk_recycle&sign=3545bd8c5ce33d0d564661fb10c31015&id=${this.detailId}`,
					method: "get"
				}).then((res) => {
					console.log("111")
					console.log(res)
					if (res.data.is_default == 1) {
						this.isSwitchOn = true
					} else {
						this.isSwitchOn = false
					}
					console.log(this.isSwitchOn)
					this.siteDetail = res.data
					// console.log(this.addressArr.length)
				})
			},
			handleSwitchChange() { //点击开关
				this.isSwitchOn = !this.isSwitchOn
			},
			onDelete() { //点击删除按钮
				var _this = this
				uni.showModal({
					title: "提示",
					content: "确认删除该地址?",
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							$http({
								url: `?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=address&op=del&m=wjyk_recycle&sign=63e4a8f2037676feb2e0aec21d53802f&id=${_this.siteDetail.id}`,
								method: "get"
							}).then(event => {
								console.log(event)
								uni.showModal({
									title: event.message,
									showCancel: false,
									success: function(deletedata) {
										if (deletedata.confirm) {
											uni.navigateBack()
										}
									}
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.siteAddOrModify {
		font-size: 36rpx;

		.site-mode {
			background: #fff;

			.siteAddOrModify-info {
				display: flex;
				align-items: center;
				padding: 40rpx 40rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.title {
					width: 145rpx;
					text-align: justify;
					text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
					text-align-last: justify;
					// border: 1px solid #000;
					margin-right: 25rpx;
				}

				.getset {
					width: 74%;
					display: flex;

					.getSite-title {
						overflow: hidden;
						/* 隐藏超出部分的文本 */
						text-overflow: ellipsis;
						/* 显示省略号 */
						// border: 1px solid #000;
						color: #808080;
					}
				}

				.siteRight {
					width: 74%;
					white-space: nowrap;
					/* 让文本在一行内显示 */
					overflow: hidden;
					/* 隐藏超出部分的文本 */
					text-overflow: ellipsis;
					/* 显示省略号 */
					// border: 1px solid #000;
					font-size: 28rpx;
				}
			}

			.sitedefault {
				//默认地址栏
				justify-content: space-between;
				display: flex;
				align-items: center;
				padding: 15rpx 40rpx;

				.title {
					width: 145rpx;
					// border: 1px solid #f00;
					text-align: justify;
					text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
					text-align-last: justify;
					margin-right: 25rpx;
				}

				switch {
					// --bg-on: #2196F3; /* 设置打开时的背景颜色为蓝色 */
					transform: scale(0.8);
				}
			}
		}

		.TapSave {
			padding: 20rpx 0;
			width: 300rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 200rpx;
			background: #00b388;
			color: #fff;
			border-radius: 10rpx;
		}

		.delete {
			padding: 20rpx 0;
			width: 300rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 20rpx;
			color: #f00;
			border-radius: 10rpx;
			background: #e5e5e5;
		}
	}
</style>